<template>
  <el-dialog
    title="规格选择"
    v-model="dialogVisible"
    width="80%"
    top="5vh">
    
    <el-container style="height: 65vh;">
      <el-aside width="220px" class="sku-aside" v-loading="loading">
        <div class="top">
          <div class="sku-list" v-for="(item, index) in tableData" :key="index" 
            :class="{'active': (activeId == item.id)}" @click="handleChangeActiveId(item.id)">
            {{ item.name }}
          </div>
        </div>
        <div class="bottom">
          <el-pagination
            background
            layout="prev, next"
            :total="total"
            :current-page="currentPage"
            :page-size="limit"
            @current-change="getData"
          />
        </div>
      </el-aside>
      <el-main>
        <el-checkbox-group v-model="form.list">
          <el-checkbox v-for="item in list" :key="item" :label="item" border>
            {{item}}
          </el-checkbox>
        </el-checkbox-group>
        
      </el-main>
    </el-container>

    <template #footer>
    <span>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </span>
    </template>
  </el-dialog>
  
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { getSkusListApi } from '@/api/skus'
  import {
    useInitTable
  } from '@/hooks/useCommon'
  
  const dialogVisible = ref(false)
  const activeId = ref(0)
  const {
    loading,
    currentPage,
    limit,
    tableData,
    total,
    getData
  } = useInitTable({
    getlist: getSkusListApi,
    onGetListSuccess: (res) => {
      tableData.value = res.list
      total.value = res.totalCount

      if(tableData.value.length > 0) {
        handleChangeActiveId(tableData.value[0].id)
      }
    }
  })
  
  const callbackFunction = ref(null)
  const open = (callback = null) => {
    callbackFunction.value = callback
    getData(1)
    dialogVisible.value = true
  }

  const form = reactive({
    name: '',
    list: []
  })
  const submit = () => {
    if(typeof callbackFunction.value == 'function') {
      callbackFunction.value(form)
    }
    dialogVisible.value = false
  }

  const list = ref([])
  function handleChangeActiveId(id) {
    activeId.value = id
    list.value = []
    const item = tableData.value.find(o => o.id === id)
    if(item) {
      list.value = item.default.split(',')
      form.name = item.name
    }
  }

  defineExpose({
    open
  })
</script>

<style scoped>
  .sku-aside {
    border-right: 1px solid #eee;
    position: relative;
  }
  .sku-aside .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }
  .sku-aside .bottom {
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
  }
  .sku-list {
    border-bottom: 1px solid #f4f4f4;
    @apply p-3 text-sm text-gray-600 flex items-center cursor-pointer;
  }
  .sku-list:hover, 
  .sku-list.active {
    @apply bg-blue-50;
  }

</style>